<template>
  <div>
    <van-nav-bar
        title="智能控制"
    />
    <van-cell-group title="教室信息">
      <van-cell>
        {{ classroom.classroomName }}
      </van-cell>
    </van-cell-group>
    <van-cell-group title="环境信息">
      <van-cell>
        <van-row>
          <van-col span="12">
            <div class="env-value" style="background: #2cb5e8">温度：{{ environment.temperature }}℃</div>
          </van-col>
          <van-col span="12">
            <div class="env-value" style="background: #2cb5e8">湿度：{{ environment.humidity }}%</div></van-col>
<!--          <van-col span="8">-->
<!--            <div class="env-value" style="background: #2cb5e8">PM2.5：&#45;&#45;</div></van-col>-->
        </van-row>
      </van-cell>
    </van-cell-group>
    <van-cell-group title="智能设备控制">
      <van-cell center
                v-for="(item, index) in devices"
                :title=getDeviceTypeChs(item) title-style="padding-left: 1em;"
                :label="item.deviceName"
                :key="item.id">
        <template #icon>
          <van-icon :name=getDeviceTypeEn(item) class-prefix="whisper-icon" size="1.2rem" />
        </template>
        <template #right-icon>
          <van-button type="info" @click="toggleSwitch" :data-id="index" :data-device-id="item.id" :data-device-status="item.status">
            {{ item.status?  '关闭':'开启' }}
          </van-button>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {getDevicesByClassroomId, getDeviceState, turnOnDevice, turnOffDevice} from "@/api/device";
import {getClassroomById, getClassroomEnvironmentInfoById} from "@/api/classroom";

export default {
  name: "Control",
  data() {
    return {
      active: 0,
      id: 1,
      currentClassroomId: 1,
      classroom: {},
      environment: {},
      devices: [

      ],
    };
  },
  created() {
    //this.$nextTick(function () {
      this.getClassroomInfo()
      this.getClassroomEnvironmentInfo()
      this.fetchData()
    //})

  },
  methods: {
    fetchData() {
      let classroomId = this.$route.query.classroomId;
      this.currentClassroomId = classroomId
      getDevicesByClassroomId(this.currentClassroomId).then((response) => {
        let list = response.data.data
        for (const index in list) {
          if(list[index].accessMode === 1 ) {
            getDeviceState(list[index].id).then((response) => {
              let result = response.data.data
              if(result.state === 'on') {
                list[index].status = true
              } else {
                list[index].status = false
              }
            })
          }
          this.devices.push(list[index])
        }
      })
    },
    getClassroomEnvironmentInfo() {
      getClassroomEnvironmentInfoById(this.currentClassroomId).then((response) => {
        this.environment = response.data.data
      })
    },
    getClassroomInfo() {
      getClassroomById(this.currentClassroomId).then((response) => {
        this.classroom = response.data.data
      })
    },
    toggleSwitch(event) {
      let index = event.currentTarget.getAttributeNode('data-id').value;
      let target = event.currentTarget
      console.log(index)

      let deviceCurrent = this.devices[index]
      console.log(deviceCurrent)

      if(deviceCurrent.status) {
        console.log(this.devices[index].status)
        console.log(event.currentTarget)
        turnOffDevice(deviceCurrent.id).then((response) => {

          if(response.data.code === 200) {
            getDeviceState(deviceCurrent.id).then((response) => {
              let result = response.data.data

              if(result.state === 'off') {
                deviceCurrent.status = false
                target.innerText = '开启'
              }
            })
          }
        })
      } else {
        console.log(this.devices[index].status)
        turnOnDevice(deviceCurrent.id).then((response) => {
          if(response.data.code === 200) {
            getDeviceState(deviceCurrent.id).then((response) => {
              let result = response.data.data
              if(result.state === 'on') {
                deviceCurrent.status = true
                target.innerText = '关闭'
              }
            })
          }
        })
      }
    },
    getDeviceTypeEn(device) {
      let deviceTypea = "";
      switch (device.deviceType) {
        case 1:
          deviceTypea = 'light';
          break;
        case 2:
          deviceTypea = 'socket';
          break;
        case 3:
          deviceTypea = 'usb';
          break;
      }
      return deviceTypea;
    },
    getDeviceTypeChs(device) {
      let labela = "";
      switch (device.deviceType) {
        case 1:
          labela = '灯光';
          break;
        case 2:
          labela = '插座';
          break;
        case 3:
          labela = 'USB';
          break;
      }
      return labela;
    },
  }
}
</script>

<style scoped>
.env-value {
  width: 100% - 10px;
  height: 60px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 0 5px;
}
</style>